<style type="text/less">
    @import "/web/public/public.less";
    .video-classroom{
        .title{
            line-height: 60px;
            border-bottom: 1px solid #EEEEEE;
            span{
                font-size: 16px;
                font-weight: 400;
            }
            a{
                color: #7f7f7f;
                font-size: 14px;
                .fr;
            }
        }
        .img-wrap{
            width: 100%;
            height: 182px;
            margin-top: 20px;
            overflow: hidden;
            position: relative;

            img{
                width: 100%;
                height: 100%;
            }
            .video-title{
                width: 100%;
                height: 40px;
                background: url("/web/img/video-img-bg.png");
                background-size: 100%;
                position: absolute;
                bottom: 0;
                font-size: 14px;
                color: #ffffff;
                line-height: 40px;
                text-align: center;
                padding: 0 15px;
                transition: .3s;
                .ellipsis;
            }

        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<#if channel.channelStatus == 1>
    <div class="video-classroom">
        <#list list as info>
            <div class="img-wrap">
                <#if info.articleOutLinkStatus == 1>
                    <a href="${info.articleOutLink}" target="_blank" title="${info.articleTitle}">
                        <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                    </a>
                    <div class="video-title"><a style="color:inherit" href="${info.articleOutLink}" target="_blank" title="${info.articleTitle}">${info.articleTitle}</a></div>
                <#else>
                    <a href="${info.articleUrl}" target="_blank" title="${info.articleTitle}">
                        <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                    </a>
                    <div class="video-title"><a style="color:inherit" href="${info.articleUrl}" target="_blank" title="${info.articleTitle}">${info.articleTitle}</a></div>
                </#if>
            </div>
        </#list>
    </div>
</#if>